<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.4);
            /* 固定定位:以html视口为参照物,紧贴四个边,就能实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad, assumenda cum deleniti doloremque eius
            error ipsa laborum laudantium nisi nostrum omnis quas quia quidem repellat sequi sint suscipit, vitae.
        </div>
        <div>Autem laborum molestias perspiciatis tempore! Eveniet reprehenderit similique velit. Dolorem et eveniet
            fugiat impedit omnis perferendis voluptates. Amet at autem cum deleniti, dignissimos dolorum ex harum labore
            nesciunt nihil numquam.
        </div>
        <div>Fugiat id, iusto odit officia quia voluptatum? Ab atque, blanditiis harum ipsa magnam magni perspiciatis
            porro, praesentium quia repellat soluta tempore ullam, veniam? Distinctio earum molestias nemo perferendis
            provident temporibus.
        </div>
        <div>Ad aliquid, amet animi at atque esse et, eveniet harum, incidunt inventore minus molestias obcaecati optio
            pariatur quisquam reprehenderit vel vero vitae. Aliquid dolore excepturi magnam non perferendis quis,
            voluptatibus?
        </div>
        <div>Accusantium architecto asperiores commodi cum cumque ea earum id illum minima, nam nesciunt, odio optio
            quibusdam quis quos, sed sit soluta tempore totam voluptatibus. Accusantium ea illum magni non officiis.
        </div>
        <div>Ab debitis distinctio dolorem ea iusto minima nemo, numquam quos sint. Accusantium ad aliquid at atque
            blanditiis cum harum illum modi numquam, pariatur, quam quas reiciendis saepe sapiente, tempora tempore.
        </div>
        <div>Accusamus ad architecto at cum cumque cupiditate delectus dicta dolore eligendi est exercitationem
            explicabo facere fugiat, incidunt minima molestiae neque nulla quam ratione sunt tempora temporibus tenetur
            ullam vel voluptatem?
        </div>
        <div>Ad atque cumque dolor dolorem doloribus error fuga incidunt ipsa magnam maxime, molestias nemo neque
            officia quod sint ullam vitae. Illo incidunt nostrum quia, quo sequi totam. Minus, reiciendis voluptatem!
        </div>
        <div>Asperiores consequuntur iste molestiae nisi vitae. Amet assumenda aut, blanditiis consequatur debitis
            dignissimos earum ex id maxime nam natus praesentium quibusdam reiciendis sunt vitae voluptate, voluptatum!
            Architecto consequuntur quos velit.
        </div>
        <div>Animi commodi cum cumque, ducimus exercitationem impedit iste nihil optio quae quia, tempore temporibus. Ab
            aperiam consequuntur culpa laborum molestias nemo quas repellat totam. Atque corporis culpa fugiat
            praesentium quis?
        </div>
        <div>Aperiam deleniti explicabo harum, illum iure, laboriosam laudantium libero nam odio quidem repellat
            repudiandae rerum, voluptates? Ab asperiores dignissimos distinctio doloribus illo iste labore laudantium
            modi, numquam reprehenderit? Consequuntur, cum.
        </div>
        <div>Animi architecto blanditiis, dignissimos dolore dolores enim ex facilis, harum illo ipsum molestiae sint
            ullam. Asperiores assumenda deleniti error exercitationem fugit, iusto laborum officiis ratione rem,
            sapiente tenetur ullam vitae!
        </div>
        <div>Excepturi magni quae reiciendis tempore veritatis! Alias, atque consequuntur corporis dolores enim est
            harum hic laboriosam libero modi, molestiae, nemo nisi nulla officia perferendis quasi repellat sunt totam
            ut vel?
        </div>
        <div>Aut blanditiis dicta distinctio doloribus earum eum expedita incidunt iure quam, quod soluta sunt suscipit
            ut. Consequuntur, cumque dolorem doloribus eum excepturi itaque iusto nihil quia ratione sunt tenetur ullam.
        </div>
        <div>Accusantium ad commodi dignissimos dolor dolorem eaque et id iste iure iusto, laudantium mollitia natus
            nemo nisi nobis odit possimus, quasi quo ratione rem sequi sunt ullam vel velit voluptatibus?
        </div>
        <div>Adipisci animi architecto beatae deleniti dicta ea eveniet fugiat, id illum itaque maiores nisi provident
            quae repellendus reprehenderit saepe similique, sint soluta temporibus tenetur unde veritatis voluptatem
            voluptates voluptatibus voluptatum?
        </div>
        <div>Aliquid aperiam, consequuntur enim eum illum maxime molestias natus, officia porro quibusdam suscipit totam
            vero. Eaque enim molestiae nemo quo similique. Aliquam assumenda, fuga magni mollitia nihil quis repudiandae
            voluptas.
        </div>
        <div>Architecto beatae delectus dicta, dolorem doloribus ea eligendi facere iste, labore minima minus pariatur
            porro provident qui quidem repudiandae sed sit soluta, tempore veritatis! Accusantium aliquam ipsa ipsam
            ipsum molestias?
        </div>
        <div>A aliquid autem corporis debitis deleniti dolore dolorem ducimus eligendi eveniet fugit id magnam modi
            mollitia nam necessitatibus nesciunt nulla numquam odio officia, officiis provident quisquam soluta vel
            voluptas voluptates?
        </div>
        <div>Accusantium beatae expedita facere minima officiis recusandae, ullam veniam voluptas voluptatum. A aperiam
            at cum cumque eaque eligendi eos illo, labore magni nemo numquam obcaecati quasi qui reprehenderit sunt
            unde!
        </div>
        <div>Ad beatae earum fuga itaque iure maxime mollitia perferendis, quia! Debitis labore perferendis vel? Ab
            blanditiis, dolorum incidunt libero molestias nobis quia quos recusandae saepe tempora? Consectetur modi
            molestiae molestias!
        </div>
        <div>Animi aut dicta similique? Dicta error eum hic labore nesciunt omnis sequi. Deleniti earum eius id impedit
            incidunt inventore ipsa itaque laudantium nostrum, nulla praesentium quae quia quos rem temporibus?
        </div>
        <div>Accusantium commodi consequuntur delectus dolorem ea ex facere fugit illo iste magni molestiae molestias
            nobis numquam placeat, porro praesentium quas, quibusdam quidem quod recusandae, repellat reprehenderit sed
            sequi vero voluptas.
        </div>
        <div>Consequatur cum dolorem dolores ducimus et expedita illum impedit, in, incidunt inventore nostrum nulla
            vel. Aliquam, et, quia. Assumenda corporis eligendi error laborum mollitia praesentium soluta temporibus
            veritatis vero, voluptatem.
        </div>
        <div>Ex laudantium, nam. Adipisci aperiam architecto, asperiores assumenda dolorem dolores, ducimus
            exercitationem id inventore iure magnam minus nemo nulla placeat quas quos recusandae, repellendus similique
            soluta suscipit velit veritatis vero!
        </div>
        <div>Aspernatur cum optio voluptas. Alias, architecto consequatur eaque esse exercitationem id, ipsa iure,
            libero mollitia nobis quae quas quisquam repellat sed tenetur veniam veritatis? Adipisci aliquam at
            consectetur facilis nulla.
        </div>
        <div>Ad amet, asperiores atque consequatur cum deleniti dicta distinctio dolorem eaque eos eum expedita incidunt
            iure labore modi molestiae nesciunt non numquam quis quisquam rem repellendus sint ut vitae voluptas!
        </div>
        <div>Assumenda at nihil odit placeat quae quasi quia recusandae repudiandae similique suscipit? Cum, facere fuga
            hic maxime odit quisquam sunt. Commodi esse libero magni nemo nihil, perspiciatis suscipit vero voluptas!
        </div>
        <div>Cum id iure mollitia non repellat reprehenderit vitae voluptas. A accusamus ad asperiores dolorem, eos
            facere illum incidunt ipsam itaque maiores, numquam omnis recusandae, sequi similique sit suscipit totam
            veniam.
        </div>
        <div>Alias aliquid aspernatur aut dignissimos eaque est eveniet facilis fugiat fugit illo in iste itaque magnam
            magni neque officia omnis optio possimus quaerat quas quidem repellendus rerum sit, tenetur voluptates?
        </div>
        <div>Architecto cumque dolor in maxime minus placeat quis repudiandae sit suscipit velit! Accusantium alias
            aliquam doloremque, eligendi exercitationem explicabo nihil nostrum pariatur quasi reprehenderit sit ullam
            vel voluptatibus. Debitis, quisquam!
        </div>
        <div>Aliquam architecto, asperiores aspernatur atque consequuntur deserunt dolor dolorem, doloribus ea eaque
            earum exercitationem facere minus nihil non odio omnis perferendis, quidem repellat sapiente soluta sunt
            tenetur totam ullam veritatis?
        </div>
        <div>Cupiditate distinctio ducimus eaque exercitationem impedit inventore iusto laborum, non numquam officia
            perferendis, perspiciatis reprehenderit, vitae! Commodi incidunt libero odio provident qui rem totam vitae?
            Aperiam illum nihil recusandae rem!
        </div>
        <div>Distinctio doloremque ducimus laboriosam provident repellendus reprehenderit repudiandae voluptate
            voluptatum. Aliquid animi architecto blanditiis dicta distinctio fuga ipsum labore nesciunt non nostrum
            obcaecati officia officiis quas, quibusdam unde voluptas voluptatum?
        </div>
        <div>Ea esse libero modi necessitatibus nesciunt optio possimus vel. Adipisci atque blanditiis ea fugit ipsam
            iste iure labore maiores mollitia necessitatibus non nulla odit, perferendis praesentium quidem sint
            temporibus voluptas.
        </div>
        <div>Amet aperiam nihil odit praesentium provident quam sed tenetur vitae? Architecto assumenda debitis
            doloribus eaque, inventore ipsa ipsum magni, molestiae perferendis quia quod quos sed tempora temporibus,
            vitae voluptates voluptatum!
        </div>
        <div>Corporis doloremque facere labore laboriosam nemo nesciunt optio perspiciatis quos vitae voluptatem?
            Adipisci consequuntur inventore quaerat sunt temporibus. Accusantium asperiores beatae corporis dicta dolor
            doloremque error excepturi ipsam quisquam tempora!
        </div>
        <div>Ad adipisci aut corporis culpa cum dicta distinctio dolor dolorum eius eligendi fuga illum labore minus,
            natus nihil officiis omnis ratione repellat sed, sunt, velit veniam veritatis? Iste, praesentium, quos.
        </div>
        <div>Ad aliquid autem delectus deleniti dolore, esse expedita hic illum ipsum, magnam sed suscipit tempora,
            tempore! Amet animi aspernatur beatae delectus eum ipsam maxime nulla quam repellendus reprehenderit,
            tenetur ut?
        </div>
        <div>Ipsam itaque labore porro quis unde. Ab amet cupiditate est excepturi fugiat fugit impedit incidunt iste
            labore, laboriosam minima nemo neque nisi non omnis provident tempore tenetur unde vero voluptate!
        </div>
        <div>Animi atque consequatur doloremque doloribus eligendi, error et id illum, in ipsa itaque laudantium magnam
            maxime molestias mollitia odio perspiciatis quam, quia quis repellat sequi sit ullam voluptate voluptatem
            voluptatibus!
        </div>
        <div>Architecto asperiores consequuntur dignissimos dolorem, error iusto officiis ratione repudiandae sapiente
            voluptate. Accusantium, blanditiis dolorem eius enim maiores nisi? Aspernatur expedita hic nemo quia rem.
            Deleniti dolore facere fuga reprehenderit.
        </div>
        <div>Amet blanditiis delectus deserunt distinctio facilis laborum nesciunt quibusdam repellat vel voluptatibus?
            Adipisci consequuntur error facere neque obcaecati quae repellendus sapiente sit, tenetur? Aliquid
            distinctio doloribus facilis incidunt libero tenetur?
        </div>
        <div>Aspernatur consequatur facilis labore laboriosam necessitatibus sed ullam. Assumenda beatae dignissimos
            dolor eos hic illo impedit ipsum itaque laboriosam laudantium magni necessitatibus placeat, possimus
            praesentium quo, quos repudiandae similique, voluptate?
        </div>
        <div>Deserunt, dolorum, odio. Ab dicta, ipsa. Alias aut commodi eligendi facere, molestias nisi non nulla quas
            quo veritatis? Eos, illo, totam! A atque minus saepe veniam voluptatibus. Autem, quis temporibus.
        </div>
        <div>Architecto blanditiis dicta, ea, exercitationem, in iure laudantium libero maiores nesciunt nisi nobis
            porro quam reprehenderit sapiente vel? A atque delectus distinctio nemo nobis quidem, recusandae rem
            temporibus velit voluptatum!
        </div>
        <div>Asperiores deserunt doloremque dolorum eaque est exercitationem hic id incidunt inventore labore laboriosam
            nemo pariatur perferendis recusandae, reiciendis repellat, veritatis voluptas. Ab culpa doloremque ea fugiat
            illum necessitatibus quis voluptatem.
        </div>
        <div>Accusamus aperiam, aspernatur delectus ducimus eligendi exercitationem fugit, illum ipsum natus porro
            recusandae rem saepe totam! Consequuntur eligendi iusto laudantium magni maiores, officia pariatur
            perferendis rem rerum veritatis. Eius, libero.
        </div>
        <div>Ab alias amet, animi aperiam aspernatur atque autem cum deleniti dignissimos dolores eius eveniet fugit
            magnam maxime necessitatibus nemo nulla numquam officia quas quos recusandae sapiente tempore totam voluptas
            voluptatem.
        </div>
        <div>Architecto, beatae consequuntur dolorum eos est laborum minima modi nesciunt optio possimus praesentium
            quod reiciendis repellat sed, ullam? Animi debitis dicta doloremque doloribus, fugiat nulla omnis sed
            tempore temporibus veritatis.
        </div>
    </div>
</body>
</html>